<template>
	<view style="padding: 40rpx;margin: 80rpx 0;">
		<view style="padding: 20rpx;background-color: #fff;box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);border-radius: 10rpx;">
			<uni-forms :modelValue="form" ref="form" :rules="rules" validate-trigger="blur">
				<view style="margin: 50rpx 30rpx;font-size: 40rpx;">欢迎注册</view>
						<uni-forms-item name="username" required>
							<uni-easyinput prefixIcon="person" type="text" v-model="form.username" placeholder="请输入账号" />
						</uni-forms-item>
						<uni-forms-item name="password" required>
							<uni-easyinput prefixIcon="locked" type="text" v-model="form.password" placeholder="请输入密码" />
						</uni-forms-item>
						<uni-forms-item>
							<button @click="register()" style="background-color: #ffd100;height: 70rpx;line-height: 70rpx;border-color:#ffd100">注册</button>
						</uni-forms-item>
						<uni-forms-item>
							<view style="text-align: right;">
								已有账号?去<navigator url="/pages/login/login" style="color: aqua;display: inline-block;margin-left: 4rpx;">登录</navigator>
							</view>
						</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					role:'USER'
				},
				rules: {
					// 对name字段进行必填验证
					username: {
						// name 字段的校验规则
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写账号',
							},
						]
					},
					password: {
						rules:[
							{
								required: true,
								errorMessage: '请填写密码',
							}
						]
					}
				}

			}
		},
		methods: {
			register(){
				this.$refs.form.validate().then(res=>{
								this.$request.post('/register',this.form).then(res=>{
									if(res.code==='200'){
										uni.showToast({
											icon:'success',
											title:res.msg
										})
										setTimeout(()=>{
											uni.navigateTo({
												url:'/pages/login/login'
											})
										},500)
									}else{
										uni.showToast({
											icon:'error',
											title:res.msg
										})
									}
								})
							}).catch(err =>{
								console.log('表单错误信息：', err);
							})

			}
		}
	}
</script>

<style>

</style>
